<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-10-08 10:45:57
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-12-13 10:42:17
 * @Description: 
 * @FilePath: \charging-mini\充电项目\pages\login.vue
-->
<template>
    <div class="container">
        <img class="logo" :src="imgs.logo" alt="" />
        <div class="title">苏惠充</div>

        <button v-if="!loading && need_bind_phone" class="btn phone-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取本机手机号</button>
        <button v-if="!loading && !need_bind_phone" class="btn phone-btn" @click="handleLogin">点击登录</button>
    </div>
</template>
<script>
import { bindPhoneAPI } from "../src/api/api";
const app = getApp();

export default {
    data() {
        return {
            isWx: app.globalData.isWx,
            imgs: app.globalData.imgs,
            loading: false,
            need_bind_phone: true,
        };
    },
    onShareAppMessage() {},
    onShow() {
        // 获取最新login token
        this.loading = true;
        uni.showLoading({
            title: "加载中",
        });
        app.login(true).then((res) => {
            this.loading = false;
            this.need_bind_phone = res.need_bind_phone;
            uni.hideLoading();
        });
    },
    methods: {
        // 已绑定手机号点击登录
        handleLogin() {
            uni.showLoading({
                title: "登录中",
            });
            app.login().then((res) => {
                uni.showToast({
                    title: "登录成功",
                    icon: "success",
                });
                setTimeout(() => {
                    uni.navigateBack();
                }, 1500);
            });
        },
        // 获取本机手机号
        getPhoneNumber(e) {
            console.log("获取手机号", e);
            let code = this.isWx ? e.detail.code : e.detail.encryptedData;
            if (code) {
                uni.showLoading({
                    title: "加载中...",
                });
                bindPhoneAPI({
                    code,
                }).then((res) => {
                    // 更新用户数据和token本地缓存
                    uni.removeStorageSync("isLogout");
                    uni.setStorageSync("userInfo", res);
                    uni.setStorageSync("token", res.token);

                    uni.showToast({
                        title: "绑定手机号成功",
                        icon: "success",
                    });
                    setTimeout(() => {
                        uni.navigateBack();
                    }, 1500);
                });
            } else {
                uni.showToast({
                    title: "获取本机手机号失败",
                    icon: "none",
                });
                console.log("获取本机手机号失败", e);
            }
        },
    },
};
</script>
<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    .logo {
        width: 200rpx;
        height: 200rpx;
        margin-top: 150rpx;
        margin-bottom: 20rpx;
    }
    .title {
        font-size: 40rpx;
        font-weight: bold;
        margin-bottom: 200rpx;
        color: #333;
    }
    .input {
        width: 630rpx;
        padding: 30rpx 0;
        display: flex;
        border-bottom: 1rpx solid #bfbfbf;
        margin-bottom: 10rpx;
        input {
            flex: auto;
        }
        .vercode {
            width: 150rpx;
            text-align: center;
            color: #009cff;
            font-size: 30rpx;
        }
    }
    .btn {
        width: 630rpx;
        height: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 40rpx;
        font-size: 30rpx;
        color: #fff;
        background-color: #009cff;
        border-radius: 50rpx;
    }
    .phone-btn {
        background: linear-gradient(90deg, #8bdab0 0%, #08bfa8 100%);
    }
}
</style>
